<template>
  <div class="addInviteConfig">
    <h2 class="editPage">{{ id ? "修改" : "新增" }}</h2>
    <a-card>
      <a-form :form="form" layout="inline">
        <a-form-item
          label="店铺名称"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入店铺名称"
            @change="merchantNameChange"
            v-decorator="[
              'merchantName',
              {
                initialValue: postUserData.merchantName,
                rules: [{ required: true, message: '请输入店铺名称' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="卖家用户名"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入卖家用户名"
            @change="merchantContactChange"
            v-decorator="[
              'merchantContact',
              {
                initialValue: postUserData.merchantContact,
                rules: [{ required: true, message: '请输入卖家用户名' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="企业名称"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入企业名称"
            @change="companyNameChange"
            v-decorator="[
              'companyName',
              {
                initialValue: postUserData.companyName,
                rules: [{ required: true, message: '请输入企业名称' }],
              },
            ]"
          ></a-input>
        </a-form-item>

        <a-form-item
          label="联系电话"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入联系电话"
            @change="contactPhoneChange"
            v-decorator="[
              'contactPhone',
              {
                initialValue: postUserData.contactPhone,
                rules: [{ required: true, message: '请输入联系电话' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="登录密码"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入登录密码"
            @change="passwordChange"
            v-decorator="[
              'password',
              {
                initialValue: postUserData.password,
                rules: [{ required: true, message: '请输入登录密码' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="店铺类型"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-select
            placeholder="请选择店铺类型"
            :allowClear="true"
            showSearch
            :filterOption="filterOption"
            @change="roleChange"
            v-decorator="[
              'merchantType',
              { rules: [{ required: true, message: '请选择店铺类型' }] },
            ]"
          >
            <a-select-option
              v-for="item of rolesList"
              :key="item"
              :value="item"
              >{{ item }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item
          label="企业地址"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-cascader
            :options="options"
            placeholder="请选择企业地址"
            @change="onChange"
          />
        </a-form-item>
        <a-form-item
          label="地址详情"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            placeholder="请输入地址详情"
            @change="accountAddressChange"
            v-decorator="[
              'accountAddress',
              {
                initialValue: postUserData.accountAddress,
                rules: [{ required: true, message: '请输入地址详情' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <div>
          <a-button
            type="primary"
            class="marginBtn"
            :loading="loading"
            @click="AddInviteConfigAction"
            >确定</a-button
          >
          <a-button @click="$router.go(-1)" class="marginBtn">返回</a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import * as API from "../../api/business";
import { url, imgUrl } from "../../utils/env-setup";
import { mapState } from "vuex";
import editor from "../../commonComponents/editor/editor";
import address from "../../utils/cascader";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  name: "inviteConfig",
  data() {
    return {
      Info: {},
      address: {},
      rolesList: ["旗舰店", "专卖店", "自营店"],
      options: [],
      form: this.$form.createForm(this),
      num: 0,
      id: null,
      loading: false,
      postUserData: {
       
      },
      agentLevelList: [
        { value: "ONE", label: "一级" },
        { value: "TWO", label: "二级" },
        { value: "THREE", label: "三级" },
      ],
      rewardTypeList: [
        { value: "SJ_JL", label: "升级奖励" },
        { value: "YJ_JL", label: "佣金奖励" },
      ],
      previewVisible: false,
      previewImage: "",
      fileList: [],
      previewVisibleIos: false,
      previewImageIos: "",
      fileListIos: [],
      url: "",
    };
  },
  components: {
    editor,
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  mounted() {
    this.merchantInfo();
  },
  created() {
    this.id = this.$route.query.id || null;
    console.log(this.id, "sssssssssssss");
    // this.id ? this.getMrechDetailList() : this.idCreate();
    // console.log(address, "address");
    this.options = address;
  },
  activated() {},
  methods: {
    setFields(submitData) {
      console.log(submitData, "ddddddddddddd");
      // form 回写
      this.postUserData.merchantName = submitData.merchantName;
      this.postUserData.merchantContact = submitData.merchantContact;
      this.postUserData.companyName = submitData.companyName;
      this.postUserData.contactPhone = submitData.contactPhone;
      this.postUserData.password = submitData.password;
      this.postUserData.merchantType = submitData.merchantType;
      this.postUserData.accountAddress = submitData.provinceName + "/" + submitData.cityName + "/" + submitData.areaName ;

      //   password  role  accountAddress
      this.form.setFieldsValue({
        merchantName: submitData.merchantName || undefined,
        merchantContact: submitData.merchantContact || undefined,
        companyName: submitData.companyName || undefined,
        contactPhone: submitData.contactPhone || undefined,
        contactPhone: submitData.contactPhone || undefined,
        password: submitData.password || undefined,
        accountAddress: submitData.provinceName + "/" + submitData.cityName + "/" + submitData.areaName,
        merchantType:submitData.merchantType || undefined
      });
    },
    merchantInfo() {
      if (this.id) {
        API.merchantInfo(this.id).then((res) => {
          this.Info = res.data;
          this.setFields(this.Info);
        });
      }
    },
    onChange(value, selectedOptions) {
      this.postUserData.provinceCode = value[0];
      this.postUserData.cityCode = value[1];
      this.postUserData.areaCode = value[2];

      this.postUserData.provinceName = selectedOptions[0].label;
      this.postUserData.cityName = selectedOptions[1].label;
      this.postUserData.areaName = selectedOptions[2].label;

      console.log(this.address);
      console.log(
        value,
        selectedOptions[0].label,
        selectedOptions[1].label,
        selectedOptions[2].label
      );
    },
    roleChange(value) {
      this.postUserData.merchantType = value;
      console.log(value, 5555);
      //   this.postUserData.roleId = value;
      //   this.postUserData.roles = []
      //   value.forEach(item => {
      //     let arr = item.split(',')
      //     this.postUserData.roles.push({ "id": arr[0], "name": arr[1] })
      //   })
      // this.roles.push
    },
    idCreate() {
      // API.idCreate({str: 'SH-'}).then(res => {
      //   this.postUserData.merchantNo = res.data
      // })
    },
    editorActon(editorContent) {
      // console.log(editorContent, 1111)
      this.postUserData.remark = editorContent;
    },
    // getMrechDetailList() {
    //   this.num = 0;
    //   API.getPageDetial(this.id).then((res) => {
    //     if (res.code === 200) {
    //       this.num = 9;
    //       this.postUserData = res.data;
    //       this.fileList[0] = {
    //         uid: "-1",
    //         name: "image",
    //         status: "done",
    //         url: imgUrl + res.data.azImg,
    //       };
    //       this.fileListIos[0] = {
    //         uid: "-1",
    //         name: "image",
    //         status: "done",
    //         url: imgUrl + res.data.iosImg,
    //       };
    //     }
    //   });
    // },
    AddInviteConfigAction() {
      this.form.validateFields((err) => {
        if (!err) {
          this.id ? this.edit() : this.add();
        }
      });
    },
    //新增
    add() {
      this.loading = true;
      API.merchantCreate(this.postUserData)
        .then((res) => {
          if (res.code === 200) {
            // this.$message.destroy();
            this.$message.success("添加成功");
            this.$router.go(-1);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //修改
    edit() {
      this.loading = true;
      API.merchantAlter(this.id, this.postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功");
            this.$router.go(-1);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    filterOption(input, option) {
      console.log(input,option)
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // handleCancel() {
    //   this.previewVisible = false;
    // },
    // async handlePreview(file) {
    //   if (!file.url && !file.preview) {
    //     file.preview = await getBase64(file.originFileObj);
    //   }
    //   this.previewImage = file.url || file.preview;
    //   this.previewVisible = true;
    // },
    // handleChange({ fileList }) {
    //   this.fileList = fileList;
    //   if (fileList[0] && fileList[0].status === "done") {
    //     this.postUserData.azImg = fileList[0] ? fileList[0].response.data : "";
    //   }
    // },
    // handleCancelIos() {
    //   this.previewVisibleIos = false;
    // },
    // async handlePreviewIos(file) {
    //   if (!file.url && !file.preview) {
    //     file.preview = await getBase64(file.originFileObj);
    //   }
    //   this.previewImageIos = file.url || file.preview;
    //   this.previewVisibleIos = true;
    // },
    // handleChangeIos({ fileList }) {
    //   this.fileListIos = fileList;
    //   if (fileList[0] && fileList[0].status === "done") {
    //     this.postUserData.iosImg = fileList[0] ? fileList[0].response.data : "";
    //   }
    // },
    //表单参数
    merchantNameChange(e) {
      this.postUserData.merchantName = e.target.value;
    },
    merchantContactChange(e) {
      this.postUserData.merchantContact = e.target.value;
    },
    companyNameChange(e) {
      this.postUserData.companyName = e.target.value;
    },
    contactPhoneChange(e) {
      this.postUserData.contactPhone = e.target.value;
    },
    passwordChange(e) {
      this.postUserData.password = e.target.value;
    },
    accountAddressChange(e) {
      this.postUserData.accountAddress = e.target.value;
    },
    // inviteCodeChange(e) {
    //   this.postUserData.inviteCode = e.target.value;
    // },
    // merchantNameChange(e) {
    //   this.postUserData.merchantName = e.target.value;
    // },
    // merchantNameChange(e) {
    //   this.postUserData.merchantName = e.target.value;
    // }
  },
};
</script>

